<template>
  <div>
    <div class="head-container">
      <crudOperation
        show=""
        :permission="permission"
      />
      <!-- <pagination /> -->
    </div>
    <el-table
      ref="table"
      :data="crud.data"
    >
      <el-table-column
        type="index"
        label="序号"
        width="55"
      />
      <el-table-column
        label="模型名称"
        prop="modelName"
      />
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.param.isErrorModel=='FAILED'">失败</span>
          <span v-if="scope.row.param.isErrorModel=='FINISHED'">成功</span>
          <span v-if="scope.row.param.isErrorModel=='PENDING'">等待中</span>
        </template>
      </el-table-column>
      <el-table-column label="持续时间">
        <template slot-scope="scope">
          <span v-if="scope.row.param.continueSymbol=='>'&&scope.row.param.continue!=''">大于{{ scope.row.param.continue+scope.row.param.continueUnit }}</span>
          <span v-if="scope.row.param.continueSymbol=='<'&&scope.row.param.continue!=''">小于{{ scope.row.param.continue+scope.row.param.continueUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已分配 VCore 的秒数">
        <template slot-scope="scope">
          <span v-if="scope.row.param.vcoreSymbol=='>'&&scope.row.param.vcore!=''">大于{{ scope.row.param.vcore }}</span>
          <span v-if="scope.row.param.vcoreSymbol=='<'&&scope.row.param.vcore!=''">小于{{ scope.row.param.vcore }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已分配内存的秒数">
        <template slot-scope="scope">
          <span v-if="scope.row.param.memorySymbol=='>'&&scope.row.param.memory!=''">大于{{ scope.row.param.memory }}</span>
          <span v-if="scope.row.param.memorySymbol=='<'&&scope.row.param.memory!=''">小于{{ scope.row.param.memory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已分配VCore数">
        <template slot-scope="scope">
          <span v-if="scope.row.param.allocationVcoreSymbol=='>'&&scope.row.param.allocationVcore!=''">大于{{ scope.row.param.allocationVcore }}</span>
          <span v-if="scope.row.param.allocationVcoreSymbol=='<'&&scope.row.param.allocationVcore!=''">小于{{ scope.row.param.allocationVcore }}</span>
        </template>
      </el-table-column>
      <el-table-column label="已分配的内存">
        <template slot-scope="scope">
          <span v-if="scope.row.param.allocationMemorySymbol=='>'&&scope.row.param.allocationMemory!=''">大于{{ scope.row.param.allocationMemory }}</span>
          <span v-if="scope.row.param.allocationMemorySymbol=='<'&&scope.row.param.allocationMemory!=''">小于{{ scope.row.param.allocationMemory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="正在运行的容器数">
        <template slot-scope="scope">
          <span v-if="scope.row.param.containerSymbol=='>'&&scope.row.param.container!=''">大于{{ scope.row.param.container }}</span>
          <span v-if="scope.row.param.containerSymbol=='<'&&scope.row.param.container!=''">小于{{ scope.row.param.container }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="editSet(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="text"
            @click="del(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="handleClose"
      :visible.sync="crud.status.cu > 0"
      title="新增"
      width="1000px"
    >
      <el-form
        ref="form"
        :inline="true"
        label-width="140px"
        :rules="rules"
        :model="ruleForm"
      >
        <el-form-item label="模型名称:">
          <el-input
            v-model="modelName"
            placeholder="请输入"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item
          label="状态:"
          prop="isErrorModel"
        >
          <el-radio-group v-model="ruleForm.isErrorModel">
            <el-radio-button label="FAILED">失败</el-radio-button>
            <el-radio-button label="FINISHED">成功</el-radio-button>
            <el-radio-button label="PENDING">等待中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="持续时间：">
          <el-radio-group v-model="ruleForm.continueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.continue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="ruleForm.continueUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="已分配VCore的秒数">
          <el-radio-group v-model="ruleForm.vcoreSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.vcore"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配内存的秒数">
          <el-radio-group v-model="ruleForm.memorySymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.memory"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配VCore数">
          <el-radio-group v-model="ruleForm.allocationVcoreSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.allocationVcore"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配的内存">
          <el-radio-group v-model="ruleForm.allocationMemorySymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.allocationMemory"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="正在运行的容器数">
          <el-radio-group v-model="ruleForm.containerSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="ruleForm.container"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleClose"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="save"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :before-close="editClose"
      :visible.sync="editFlag"
      title="编辑"
      width="1000px"
    >
      <el-form
        ref="forms"
        :inline="true"
        label-width="140px"
        :rules="rules"
        :model="editForm"
      >
        <el-form-item label="模型名称:">
          <el-input
            v-model="modelName"
            placeholder="请输入"
            style="width:300px"
          />
        </el-form-item>
        <el-form-item
          label="状态:"
          prop="isErrorModel"
        >
          <el-radio-group v-model="editForm.isErrorModel">
            <el-radio-button label="FAILED">失败</el-radio-button>
            <el-radio-button label="FINISHED">成功</el-radio-button>
            <el-radio-button label="PENDING">等待中</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="持续时间：">
          <el-radio-group v-model="editForm.continueSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.continue"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
          <el-radio-group v-model="editForm.continueUnit">
            <el-radio-button
              v-for="val in unitList"
              :label="val"
            />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="已分配VCore的秒数">
          <el-radio-group v-model="editForm.vcoreSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.vcore"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配内存的秒数">
          <el-radio-group v-model="editForm.memorySymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.memory"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配VCore数">
          <el-radio-group v-model="editForm.allocationVcoreSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.allocationVcore"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="已分配的内存">
          <el-radio-group v-model="editForm.allocationMemorySymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.allocationMemory"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
        <el-form-item label="正在运行的容器数">
          <el-radio-group v-model="editForm.containerSymbol">
            <el-radio-button
              v-for="val in symbol"
              :label="val.value"
            >{{ val.label }}</el-radio-button>
          </el-radio-group>
          <el-input
            v-model="editForm.container"
            style="width:150px"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
          />
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="editClose"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="edit"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import audit from '@/api/phaseTwo/audit.js'
import pagination from '@crud/Pagination'
const defaultCrud = CRUD({
  title: 'flink配置',
  url: '/api/cmStatementAudit/findConfigModel',
  query: {
    componentType: 'FLINK'
  }
})
export default {
  components: {crudOperation, rrOperation, udOperation, pagination },
  mixins: [presenter(defaultCrud), header(), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'add'],
        edit: ['edit'],
        del: ['del']
      },
      ruleForm: {
        continueSymbol: '>',
        continue: '',
        continueUnit: 'ms',
        vcoreSymbol: '>',
        vcore: '',
        memorySymbol: '>',
        memory: '',
        allocationVcoreSymbol: '>',
        allocationVcore: '',
        allocationMemorySymbol: '>',
        allocationMemory: '',
        containerSymbol: '>',
        container: '',
        isErrorModel: ''
      },
      modelName: '',
      unitList: ['ms', 's', 'min', 'h'],
      unit: ['KiB', 'MiB', 'GiB'],
      symbol: [{label: '大于', value: '>'}, {label: '小于', value: '<'}],
      editFlag: false,
      editForm: {},
      dataID: '',
      rules: {
        isErrorModel: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },
  watch: {

  },
  created() {
    // this.query.componentType = 'FLINK'
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterRefresh](crud) {
      crud.data.forEach(item => {
        item.param = JSON.parse(item.param)
      })
      this.modelName = '模型FLINK' + (crud.data.length + 1)
    },
    handleClose() {
      this.modelName = '模型FLINK' + (this.crud.data.length + 1)
      this.$refs.form.resetFields()
      this.ruleForm = {
        continueSymbol: '>',
        continue: '',
        continueUnit: 'ms',
        vcoreSymbol: '>',
        vcore: '',
        memorySymbol: '>',
        memory: '',
        allocationVcoreSymbol: '>',
        allocationVcore: '',
        allocationMemorySymbol: '>',
        allocationMemory: '',
        containerSymbol: '>',
        container: '',
        isErrorModel: ''
      }
      this.crud.cancelCU()
    },
    save() {
      if (this.modelName == '') {
        this.$notify({
          title: '警告',
          message: '模型名称不能为空',
          type: 'warning'
        })
      } else {
        this.$refs['form'].validate(valid => {
          if (valid) {
            const obj = {component: 'YARN', componentType: 'FLINK', modelName: this.modelName, isErrorModel: this.ruleForm.isErrorModel, param: JSON.stringify(this.ruleForm)}
            audit.insertModel(obj).then((res) => {
              this.crud.refresh()
              this.handleClose()
            })
          }
        })
      }
    },
    editClose() {
      this.$refs.forms.resetFields()
      this.editFlag = false
      this.editForm = {}
      this.modelName = '模型FLINK' + (this.crud.data.length + 1)
      this.dataID = ''
    },
    editSet(row) {
      this.editForm = row.param
      this.modelName = row.modelName
      this.dataID = row.id
      this.editFlag = true
    },
    edit() {
      this.$refs['forms'].validate(valid => {
        if (valid) {
          const obj = {component: 'YARN', componentType: 'FLINK', modelName: this.modelName, isErrorModel: this.editForm.isErrorModel, param: JSON.stringify(this.editForm), id: this.dataID}
          audit.editConfig(obj).then((res) => {
            this.editClose()
            this.crud.refresh()
          })
        }
      })
    },
    del(row) {
      this.$confirm('此操作将永久删除该模型, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const formData = new FormData()
          formData.append('id', row.id)
          audit.delModel(formData).then((res) => {
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'
            })
            this.crud.refresh()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
